<template>
	<view class="container">
		<view class="study-list">
            <scroll-view scroll-y="true" style="height: calc(100vh - 29px);" enable-pull-down="false" upper-threshold="5000" refresher-enabled="false" refresher-default-style="none" @scrolltolower="scrollBottom">
                <my-page-list :newsList="newsList" newsType="1" rank></my-page-list>
            </scroll-view>
        </view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { useUserStore } from '@/stores'
	import { onShow, onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
    import { getPortalListAPI } from '@/api/news'
    import dayjs from 'dayjs';
	const newsList = ref<any>([])
    const listId = ref<any>()
    const page = ref<any>(1)
    //上滑
    const scrollBottom = ()=>{
        console.log('触底了！')
        page.value++
        getNewsList(listId.value,2)
    }
    //获取学习文章列表 type = 1 刷新 type = 2 上拉加载
    const getNewsList = async (option:String,type:any) =>{
        console.log('option->',option,page.value)
        const params = {
            tid: option,
            page:page.value
        }
        if(type == 2 && page.value == 1) {
            uni.showToast({
                title:'已经到底了~',
                icon:'none',
                duration:2000
            })
            return
        }
        const res: any = await getPortalListAPI(params)
        console.log('res->-',res)
        
        if(!res.length && type == 2){
            uni.showToast({
                title:'已经到底了~',
                icon:'none',
                duration:2000
            })
            return
        }
        res.forEach((element: any) => {
            element.time = dayjs(element.dataline).format('YYYY-MM-DD')
            const srcMatch = element.avatar.match(/<img.*?src=["'](.*?)["']/);
            if (srcMatch && srcMatch[1]) {
                element.avatar = srcMatch[1]
            }
        })
        if(type == 1){
            newsList.value = res
        }else{
            newsList.value.push(...res)
        }
        console.log('newsList',newsList)
    }
    onPullDownRefresh(()=>{
        page.value = 1
        getNewsList(listId.value,1)
    })
    onLoad((option:any) => {
        console.log('optionLoad',option)
        listId.value = option ? option.id : ''
        uni.setNavigationBarTitle({
            title: option ? option.title : ''
        });
        getNewsList(option ? option.id : '',1)
        
        // getStudyBanner()
    })
</script>

<style lang="scss">
	.container{
		font-family: 'PingFang SC';
		.banner{
			width: 100%;
			height: 210px;
			// background-color: red;
            .swiper{
                height: 210px;
                width:100%
            }
		}
		.container-title{
			// width: 100%;
			// height: 60px;
			display: flex;
			padding: 22px 20px 16px 20px;
			flex-direction: row;
			align-items: center;
			// background-color: aliceblue;
			.titleLeft{
				flex: 1;
				font-family: PingFang SC;
				font-size: 18px;
				font-weight: 500;
				line-height: 26px;
				letter-spacing: 0px;
			}
			.titleRight{
				flex: 1;
				text-align: right;
				font-family: PingFang SC;
				font-size: 14px;
				font-weight: normal;
				line-height: 22px;
				letter-spacing: 0px;
				/* color/info/active */
				color: #166CD8;
			}
		}
		.carousel{
			width: 100vw;
            display: flex;
            flex-direction: row;
            // align-items: center;
			height: 79px;
            margin-top: 20px;
            .item{
                flex: 1;
                align-content: center;
                .imgFont{
                    font-family: PingFang SC;
                    font-size: 14px;
                    font-weight: normal;
                    line-height: 22px;
                    letter-spacing: 0px;
                    /* base/font/gy2 */
                    color: rgba(0, 0, 0, 0.6);
                }
            }
			// background-color: antiquewhite;
		}
		.study-title{
			display: flex;
			padding: 2px 20px 6px 20px;
			flex-direction: row;
			align-items: center;
			.titleLeft{
				flex: 1;
				font-family: PingFang SC;
				font-size: 18px;
				font-weight: 500;
				line-height: 26px;
				letter-spacing: 0px;
			}
			.titleRight{
				flex: 1;
				text-align: right;
				font-family: PingFang SC;
				font-size: 14px;
				font-weight: normal;
				line-height: 22px;
				letter-spacing: 0px;
				
				/* color/info/active */
				color: #166CD8;
			}
			// background-color: blue;
		}
	}
</style>
